<template>
  <div class="sys-login">
    <el-card class="box-card zl-login-box-card">
      <div slot="header">
        <span>登录</span>
        <el-button style="float: right; padding: 3px 0" type="text">
          切换注册
        </el-button>
      </div>
      <div>
          <el-row>
            <el-input v-model="username" type="text" placeholder="输入用户名"></el-input>
          </el-row>

          <el-row style="margin: 18px 0;">
            <el-input v-model="password" type="password" placeholder="输入密码"></el-input>
          </el-row>

          <el-row style="margin: 18px 0;">
            <el-col :span="12">
              <el-input v-model="captcha" placeholder="输入验证码"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin: 0px 0px 0px 16px;height:38px;border-radius:4px;border:1px solid #dcdfe6;">
                <i class="el-icon-loading">0</i>
              </div>
            </el-col>
            <el-col :span="6">
              <el-button  plain style="float: right;">重新获取</el-button>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <div style="margin: 60px 0;float: left;">
                <el-button type="text">
                  版本号:V1.0
                </el-button>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="margin: 60px 0;float: right;">
                <span>
                  <el-button type="text">
                    忘记密码？
                  </el-button>
                </span>
                <el-button type="danger" plain v-on:click="login">登录</el-button>
              </div>
            </el-col>
          </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'

  export default {
    data () {
      return {
        username: 'admin',  // 登录用户
        password: '123456', // 登录密码
        sys_error: '',      // 错误信息
        captcha: ''         // 验证码
      }
    }, // END DATA
    methods: {
      ...mapActions({
        userLogin: 'user/login'
      }),
      // 登录调用VUEX
      login () {
        let data = {
          username: this.username,  // 登录用户
          password: this.password   // 登录密码
        }
        this.userLogin(data).then(res => {
          if (res.data.username) {
            console.log('登录成功-跳转首页:', res.data)
            this.$router.push('main')
          } else {
            this.sys_error = res.data.message
          }
        }).catch(err => {
          this.sys_error = err
        })
      } // END LOGIN
    } // END METHODS
  }
</script>

<style>
  .zl-login-box-card {
    position: fixed;
    top: 50%;
    left: 50%;
    width:36%;
    height: 360px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    border:1px solid #f9a0ff;
    min-width:400px;
  }
</style>

